<template>
  <div class="carpool-container">
    <div style="text-align: center; font-size: 20px">
      <h1>
        历史拼车
      </h1>
    </div>
    <el-card style="height: 70px;margin-bottom: 7px;background-color: #f4f3d7">
      <el-input v-model="data.departure" @keyup.enter="handleSearch" clearable placeholder="请输入起点"
                style="width: 122px; margin-right: 20px; height: 35px" type="text" prefix-icon="Search"></el-input>
      <el-input v-model="data.destination" @keyup.enter="handleSearch" clearable placeholder="请输入终点"
                style="width: 122px; height: 35px" type="text" prefix-icon="Search"></el-input>
      <el-button style="margin-left: 10px; " type="primary" @click="handleSearch">查询</el-button>
      <el-button style="margin-left: 10px; " type="danger" @click="clearSearch">清空</el-button>
    </el-card>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>历史拼车信息列表</span>
        </div>
      </template>
      <el-table
          :data="data.checklist"
          stripe
          style="width: 100%; margin-left: 20px;"
          ref="childRef"
      >
        <template #empty>
          <el-empty description="暂无历史拼车信息"></el-empty>
        </template>
        <el-table-column prop="historyId" label="订单ID" width="100" />
        <el-table-column prop="departure" label="出发地" width="180" />
        <el-table-column prop="destination" label="目的地" width="180" />
        <el-table-column label="创建时间" width="180">
          <template #default="scope">
            {{ formatDate(scope.row.createdAt) }}
          </template>
        </el-table-column>
        <el-table-column label="结束时间" width="180">
          <template #default="scope">
            {{ formatDate(scope.row.endTime) }}
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 15px">
        <el-pagination
            @size-change="load"
            @current-change="load"
            v-model:current-page="data.pageNum"
            v-model:page-size="data.pageSize"
            :page-sizes = "[5, 10 ,15 ,20]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="data.total"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import {reactive,ref,onMounted, onUnmounted } from 'vue'
import {ElCard, ElMessage, ElTable, ElTableColumn, ElTag} from 'element-plus'
import request from "@/utils/request.js";

const userInfo = ref('加载中...')
try {
  const userData = JSON.parse(localStorage.getItem('car-home-user'))
  userInfo.value = userData?.userId || '???????'
} catch (error) {
  console.error('用户信息解析失败:', error)
  userInfo.value = '数据异常'
}

//订单数据
const data = reactive({
  endTime:'',
  updatedAt:'',
  createdAt:'',
  historyId:'',
  userId:'',
  search:'',
  orderId: 0,
  Username:'',
  departure:'',
  destination:'',
  departureTime:'',
  seatsAvailable:'',
  checklist:[],
  form:{},
  status:'',
  pageNum:1,
  pageSize:10,
  total:10,
})

//时间计算
let timer;

//加载订单数据
const load =() =>{
  //向后端发生请求
  request.get('/Home/History/selectPage',{
    params: {
      pageNum:data.pageNum,
      pageSize:data.pageSize,
      departure: data.departure, // 新增查询参数
      destination: data.destination
    }
  }).then(res => {
    data.checklist = res.data.list
    data.total = res.data.total
    console.log(res.data.list)
  })

}

//实时查询
const handleSearch = () => {
  ElMessage({
    message: '查询成功',
    type: 'success',
    duration: 1000,
    showClose: false
  })
  data.pageNum = 1 // 重置到第一页
  load()
}

//重置查询
const clearSearch =() =>{
  data.pageNum = 1
  data.destination=''
  data.departure=''
  load()
}

// 格式化日期显示
const formatDate = (dateString) => {
  return new Date(dateString).toLocaleString()
}

load()
</script>

<style scoped>
.carpool-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
}

.box-card {
  background-color: #f1dddd;
  border-radius: 8px;
  box-shadow: 12px 12px 12px rgba(0,0,0,0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}

el-table {
  margin-top: 15px;
}

el-tag {
  margin: 2px;
}
</style>